<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>跑马灯</title>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">

			<h1>{{ msg }}</h1>
			<button @click="start"> 开始 </button>
			<button @click="end"> 结束 </button>
		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "我狼，我骄傲...!",
					timer: null
				},
				methods: {
					start() {

						if(this.timer === null) {

							//							原来function写法 ;如果function中使用this,则this指向的是function,
							//							var _context = this
							//							this.timer = setInterval(function(){
							//								var first = _context.msg.substring(0, 1)
							//								var end = _context.msg.substring(1)
							//								_context.msg = end + first
							//								
							//								
							//							},200);							

							//ES6使用尖括号，避免this指向function；
							this.timer = setInterval(() => {
								var first = this.msg.substring(0, 1);
								var end = this.msg.substring(1);
								this.msg = end + first;
							}, 200);
							//							

						}
					},
					end() {
						clearInterval(this.timer);
						this.timer = null;

					}
				}

			});
		</script>
	</body>

</html>